/* ============= */
/* OUTER CLUSTER */
/* ============= */
.nav-outer-cluster {
    /* define custom properties */
    --outer-cluster-space: 0.0rem;
    overflow: hidden;
}
.nav-outer-cluster > * {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center; /* vertical alignment */
    /* negative margin, only half of the --space value, as it is
   added to all sides */
    margin: calc(var(--outer-cluster-space) / 2 * -1);
}
.nav-outer-cluster > * > * {
    margin: calc(var(--outer-cluster-space) / 2);
}

/* ============= */
/* INNER CLUSTER */
/* ============= */
.nav-inner-cluster {
    /* define custom properties */
    --inner-cluster-space: 0.0rem;
    overflow: hidden;
}
.nav-inner-cluster > * {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    /* negative margin, only half of the --space value, as it is
   added to all sides */
    margin: calc(var(--inner-cluster-space) / 2 * -1);
}
.nav-inner-cluster > * > * {
    margin: calc(var(--inner-cluster-space) / 2);
}

/* === */
/* NAV */
/* === */
nav {
    border: 2px solid #434343;
    background-color: #303030;
}

nav ul {
    list-style: none;
    padding-left: 0px;
}

nav ul li {
    /* max-width: 10rem; */
    /* padding: 0.8em 1.2em 0.8em 1.2em; */
    /* margin: 4px 1px 4px 1px; */
    /* color */
    /* background-color: #9fca56; */
    /* border */
    /* border: 1px solid #323232; */
    /* border-top-color: #bfea76; */
    /* border-right-color: #7faa36; */
    /* border-bottom-color: #7faa36; */
    /* border-left-color: #bfea76; */
    /* border-radius: 5px; */
    /* offset offset blur color */
    /* box-shadow: 2px 2px 1px rgba(64, 64, 64, 0.2); */
}

nav ul > li > a > span {
    padding: 0px 0.5rem 0px 0.5rem;
}

nav ul > li.active > a > span {
    border-bottom: 4px solid #8CDF60;
}

nav .nav-menu ul li:hover {
    /* border-top-color: #dfff96; */
    /* border-right-color: #9fca56; */
    /* border-bottom-color: #9fca56; */
    /* border-left-color: #dfff96; */
    background-color: #444444;
}

nav ul > li a {
    display: inline-block;
    padding: 0.8em 0.8em 0.8em 0.8em;
    font-family: sans;
    font-weight: bold;
    color: #F8F8F8;
    text-decoration: none;
    cursor: pointer;
}

.dd-nav-logo {
    width: 8rem;
    height: 2rem;
    margin: 0.5rem;
    border: 1px solid #000000;
    background-color: #FF0000;
}
